<template>
    <div>
        <head-btn :page-title="page_title"></head-btn>
        <!-- 考勤人员 -->
        <div class="person_list">
            <div  class="Container">
                <ul>
                    <li class= "list-item" data-type= "0" v-for= " (item,index) in person_resultArray" :key="index">
                        <div class="list-box"  @touchstart="touchStart" @touchend="touchEnd">
                            <div class="headImg" :class="'bg_col' + (Math.floor(Math.random()*5) + 1)">{{item.py}}</div>
                            <div class="personnel">{{item.Name}}</div>
                        </div>
                        <div class="delete" @click="deletefunction" :data-index='index'> 
                            删除
                        </div>
                        <div class="concat_line"></div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import HeadBtn from '../common/headBtn/HeadBtn'
// 联系人字母提取
import Person from '@/utils/concat/config'
import Data from '@/utils/concat/data'
import Deal from '@/utils/concat/deal'
export default {
    name: 'CheckAttenPerson',
    data () {
        return {
            page_title: '考勤人员（68人）',
            atten_name:[
                "刘琳","周子奇", "梁永燊", "林泽杰", "渣男刘", "刘韵蒋广", "asdasdasd", "bbasd", "lsd", "lsczd", '阿斯达大啊', 123, "中"
            ],
            person: '',
            nameArray: [],
            person_resultArray: []
        }
    },
    components: {
        HeadBtn
    },
    mounted () {
        // 文字首字母提取
        this.person = new Person(this.atten_name);
        this.result = this.person.handle();
        this.Result(this.result);
        window.parent.scrollTo(0, 0);
    },
    updated () {
        window.parent.scrollTo(0, 0);
    },
    methods: {
        //处理数据
        Result(r) {
            r.forEach((v, i) => {
                v.name.forEach((item, index) => {
                    this.nameArray = item.split('-')
                    let obj = { Name: this.nameArray[0], py: this.nameArray[1] };
                    this.person_resultArray.push(obj);
                })
            });
        },
        touchStart(e) {
            [this.startX, this.startY] = [e.changedTouches[0].pageX, e.changedTouches[0].pageY]
            
            this.rest();
        },
        touchEnd(e) {
            [this.endX, this.endY, this.parentElement] = [e.changedTouches[0].pageX, e.changedTouches[0].pageY, e.target.parentElement]
            this.parentElement.dataset.type == 0 && (Math.abs(this.endX - this.startX) - Math.abs(this.endY - this.startY)) > 0 ? this.movefunctions(e) : this.parentElement.dataset.type == undefined && (Math.abs(this.endX - this.startX) - Math.abs(this.endY - this.startY)) > 0 ? this.movefunctionss(e) : '';
        },
        //删除
        deletefunction(e) {
            let index = e.currentTarget.dataset.index;
            this.rest();
            this.person_resultArray.splice(index, 1)
        },
        //重置
        rest() {
            let listitems = document.querySelectorAll('.list-item');
            for (let i = 0; i < listitems.length; i++) {
                listitems[i].dataset.type = 0;
            }
        },
        //若是子级选择器滑动处理
        movefunctions(e) {
            if (this.endX - this.startX > 20) {
                this.parentElement.dataset.type = 0;
                //向右滑动
            } else if (this.startX - this.endX > 20) {
                //向左滑动
                this.parentElement.dataset.type = 1;
            }
        },
        // 若是孙子级选择器滑动处理
        movefunctionss() {
            let grandfather = this.parentElement.parentElement;
            if (this.endX - this.startX > 20) {
                //向右滑动
                grandfather.dataset.type = 0;
            } else if (this.startX - this.endX > 20) {
                //向左滑动
                grandfather.dataset.type = 1;
            }
        }
    }
}
</script>

<style scoped lang="less">
@import '../../assets/styles/color.less';
.person_list{
    background-color: #fafafa;
    padding-top: 0.17rem;
    
}
.person_list>div{
    background: #fff;
}
.Container ul {
  width: 100%;
  overflow: hidden;
  list-style-type: none;
  padding-left: 0;
}
.list-item {
  position: relative;
  width: 100%;
  height: 1.17rem;
  line-height: 1.17rem;
  transition: all 0.2s;
  -webkit-transition: all 0.2s ease-in-out;
}
.list-item[data-type="0"] {
  transform: translate3d(0, 0, 0);
}
.list-item[data-type="1"] {
  transform: translate3d(-1.35rem, 0, 0);
}
.list-box {
  width: 100%;
  height: 100%;
  font-size: 0.14rem;
  display: -webkit-flex;
  display: flex;
  justify-content: flex-start;
  padding-left: 0.41rem;
  
}
.list-item .list-box .headImg {
  height: 0.8rem;
  margin: auto 0;
  width: 0.8rem;
  line-height: 0.8rem;
  border-radius: 50%;
  font-size: 0.24rem;
  color: #fff;
  text-align: center;
  /* background-color: rgb(53, 32, 32); */
}
.list-item .list-box .personnel {
  height: 0.8rem;
  width: 2rem;
  line-height: 0.8rem;
  font-size: 0.28rem;
  color: #2a2a2a;
  padding-left: 0.24rem;
  /* background: #ff4949; */
  margin: auto 0;
}
.list-item .delete {
  width: 1.35rem;
  height: 1.17rem;
  background: #ff4949;
  font-size: 17px;
  color: #fff;
  text-align: center;
  line-height: 1.17rem;
  position: absolute;
  top: 0;
  right: -1.35rem;
}
.concat_line{
        height:0.02rem;
        margin-left: 0.41rem;
        background:rgba(241,241,241,1);
}
</style>


